
import DirMenu from '@/components/doc/DirMenu'
import { } from 'antd';
import styles from './style.less';
import { connect, Link, history } from 'umi';
import { useEffect, useState, useRef } from 'react';
import { DOC_TYPE } from '@/consts/doc';
import { FileAddOutlined } from '@ant-design/icons'
import { list } from '@/services/doc/api'
import ApiEdit from '../ApiEdit'
import ApiDetail from '../ApiDetail'

const ApiContext = (props) => {
    const {
        projectId,
        projectPermission,
        apiId,
        location
    } = props;

    const [apiMode, setApiMode] = useState("home")
    const [currentDocData, setCurrentDocData] = useState();
    const [viewApiId, setViewApiId] = useState();
    const [dirTreeData, setDirTreeData] = useState();
    const menu = useRef();

    // const [currentDir, setCurrentDir] = useState();

    useEffect(() => {
        if (apiId) {
            setApiMode("view")
            setViewApiId(apiId)
        } else {
            setApiMode("home")
        }
    }, [apiId])

    useEffect(() => {
        if (location.state?.mode === "edit") {
            setApiMode("edit")
            setCurrentDocData({
                ...location.state
            })
        } else {
            if (apiId) {
                setApiMode("view")
                setViewApiId(apiId)
            } else {
                setApiMode("home")
            }
        }
    }, [location])

    const deleteDocDir = (docDir, callBack) => {
        // 删除接口文档目录
    }


    const addApi = (dir, dirRoutes) => {
        history.push(`/projects/${projectId}/api`, {
            mode: "edit",
            dir: dir,
            dirRoutes: dirRoutes
        })
    }

    const onSaveSuccess = (doc) => {
        history.push(`/projects/${projectId}/api/${doc.id}`)
        setApiMode("view");
    }

    const onClickDoc = (docNode, dirRoutes) => {
        // console.log(docNode, dirRoutes)
        history.push(`/projects/${projectId}/api/${docNode.id}`)
        setApiMode("view");
        // setViewDocId(docNode.id)
    }

    const updateDocDir = (id, data) => {
        // updateArticleDir(projectId, id, data).then((result) => {

        // })
    }

    const loadDocData = (keys, onLoadDoc) => {
        list(projectId, {
            inDirId: keys
        }).then((result) => {
            let docList = result?.data || []
            docList = docList.map((doc) => {
                return {
                    id: doc.id,
                    title: doc.name,
                    dirId: doc.dirId,
                    key: doc.id,
                    isDir: false,
                    isLeaf: true,
                    sortNo: doc.sortNo,
                    dirId: doc.dirId
                }
            })
            let docData = {};
            docList.forEach((doc) => {
                docData[doc.dirId] = docData[doc.dirId] || [];
                docData[doc.dirId].push(doc)
            })
            onLoadDoc(docData)
        })
    }

    const onLoadDetail = (docDetail) => {
        if (docDetail) {
            menu.current && menu.current.expendDirs([docDetail.dirId])
        }
    }

    const renderArticleContent = () => {
        if (apiMode === "home") {
        } else if (apiMode === "edit") {
            return <ApiEdit projectId={projectId} projectPermission={projectPermission} dirTreeData={dirTreeData} currentDocData={currentDocData} />
        } else if (apiMode === "view") {
            return <ApiDetail projectId={projectId} onLoadDetail={onLoadDetail} projectPermission={projectPermission} apiId={viewApiId} />
        }
    }

    const onDirTreeData = (dirTreeData) => {
        setDirTreeData(dirTreeData)
    }

    return <div className={styles.apiContext}>
        <DirMenu
            ref={menu}
            title={<Link to={`/projects/${projectId}/api`}>所有接口</Link>}
            projectId={projectId}
            updateDocDir={updateDocDir}
            onDirTreeData={onDirTreeData}
            width="200px"
            docType={DOC_TYPE.API}
            deleteDir={deleteDocDir}
            onClickDoc={onClickDoc}
            dirOpertion={[
                {
                    key: "addApi",
                    icon: <FileAddOutlined />,
                    name: "新建接口",
                    onClick: addApi
                }
            ]}
            loadDocData={loadDocData}
        >
        </DirMenu>
        <div style={{
            width: "calc(100% - 200px)"
        }} className={styles.apiBody}>
            {renderArticleContent()}
        </div>
    </div>
}

export default ApiContext;